<template>
  <div class="fieldList">
    <el-card>
      <template #header>
        <div class="header">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="详情标题">
      <el-input v-model="formInline.detailTitle" placeholder="请输入" clearable />
    </el-form-item>


    <el-form-item>
     <el-button type="primary" @click="handleSave">保存</el-button>
    </el-form-item>
  </el-form>
        </div>
      </template>

      <el-table ref="dragTable" :data="userTable" style="width: 100%">
     
        <el-table-column prop="label" label="字段描述"> </el-table-column>
        <el-table-column prop="prop" label="列表字段"> </el-table-column>

        <el-table-column prop="label" label="展示类型">
          <template #default="scope">
            <el-select
              v-model="scope.row.showType"
              placeholder="固定位置"
              size="mini"
              clearable
              style="width: 140px"
            >
              <el-option label="钱" value="price" />
              <el-option label="图片" value="image" />
              <el-option label="文本" value="text" />
               <el-option label="链接" value="link" />
            </el-select>
          </template>
        </el-table-column>
          <el-table-column prop="label" label="栅格布局">
          <template #default="scope">
           <el-input-number
           v-model="scope.row.span"
              size="mini"
                controls-position="right"
           ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  shallowRef,
  toRaw,
  nextTick,
} from "vue";
import { userTableFields } from "../mock/index";
const userTable = ref(userTableFields);
const draggingIndex = shallowRef(null); // 记录拖拽行的索引
// 项目列表数据
const dragTable = ref();
const formInline = reactive({
detailTitle: '数据详情',
});

const handleSave = () => {
};
onMounted(() => {
});
</script>

<style scoped lang="scss">
.fieldList {
}
</style>
